<template>
  <div class="Home">
    <div class="header-bar">

      <mt-swipe :auto="4000" class="top-banner">
        <mt-swipe-item class="slide" v-for="item in homeData.top_banner">
          <a :href="item.url">
            <img :src="item.image" alt="" :title="item.title">
          </a>
        </mt-swipe-item>
        <!--<mt-swipe-item class="slide">-->
          <!--<a href="#">-->
            <!--<img src="https://dummyimage.com/750x530" alt="">-->
          <!--</a>-->
        <!--</mt-swipe-item>-->
        <!--<mt-swipe-item class="slide">-->
          <!--<a href="#">-->
            <!--<img src="https://dummyimage.com/750x530" alt="">-->
          <!--</a>-->
        <!--</mt-swipe-item>-->
      </mt-swipe>

      <div class="search-box" v-on:click="gotoAddress('/search')">
        <img src="../assets/search.png" alt="">
      </div>

    </div>
    <div class="home-box">
      <div class="nav-box">
        <div class="tab-item" >
          <!--v-for="item in homeData.nav_button"-->
          <a href="#/shop">
            <div class="img"><img src="../assets/img1.png" alt=""></div>
            <div class="font">女神商城</div>
          </a>
        </div>
        <div class="tab-item">
          <a :href="nav_button1">
            <div class="img"><img src="../assets/img2.png" alt=""></div>
            <div class="font">新户领取</div>
          </a>
        </div>
        <div class="tab-item">
          <a href="#/me/store">
            <div class="img"><img src="../assets/img3.png" alt=""></div>
            <div class="font">女神门店</div>
          </a>
        </div>
        <div class="tab-item">
          <a :href="nav_button3">
            <div class="img"><img src="../assets/img4.png" alt=""></div>
            <div class="font">购买须知</div>
          </a>
        </div>
      </div>

      <div class="img-box clearfix">
        <!--advertisement-->
        <div class="fl">
          <div class="img">
            <a :href="advertisement1"><img src="../assets/img5.png" alt=""></a>
          </div>
        </div>
        <div class="fr">
          <div class="img">
            <a :href="advertisement2"><img src="../assets/img6.png" alt=""></a>
          </div>
          <div class="img1">
            <a :href="advertisement0"><img src="../assets/img7.png" alt=""></a>
          </div>
        </div>
      </div>

      <div class="brand-area">
        <mt-swipe :auto="4000" class="brand-banner">

          <mt-swipe-item class="slide" v-for="item in homeData.brand_banner">
            <a :href="item.url">
              <img :src="item.image" alt="">
            </a>
          </mt-swipe-item>
          <!--<mt-swipe-item class="slide">-->
            <!--<a href="#">-->
              <!--<img src="https://dummyimage.com/750x530" alt="">-->
            <!--</a>-->
          <!--</mt-swipe-item>-->

        </mt-swipe>
      </div>
      <!--brand_proudct-->
      <div class="scroll-area">
        <div class="swiper-container">
          <div class="swiper-wrapper">


            <div class="swiper-slide" v-for="item in homeData.brand_proudct">
              <a :href="item.url">
                <div class="img"><img :src="item.image" alt=""></div>
                <div class="font">{{item.title}}</div>
                <div class="price">{{item.price}}</div>
              </a>
            </div>

            <!--<div class="swiper-slide">-->
              <!--<div class="img"><a href="#"><img src="https://dummyimage.com/200x240" alt=""></a></div>-->
              <!--<div class="font"><a href="#">【全新】gucci 鳄鱼皮手拿包</a></div>-->
              <!--<div class="price"><a href="#">¥3999</a></div>-->
            <!--</div>-->


          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination" style="display: none"></div>
        </div>
      </div>

      <nvshentuijian></nvshentuijian>


    </div>

    <foot-guide></foot-guide>

  </div>
</template>


<script>
  import footGuide from '../components/footGuide';
  import nvshentuijian from '../components/nvshentuijian'
  import { Toast,Indicator } from 'mint-ui';
  export default {
    name: 'Home',
    data () {
      return {
        homeData:{},
        advertisement0:'',
        advertisement1:'',
        advertisement2:'',
        nav_button1:'',
        nav_button3:'',
      }
    },
    mounted:function(){
//      Indicator.open();

      var _this = this;
      $.ajax({
        type:'post',
        url: RouteMap.home,
        success:function(res){
          if(res.code == 200){
            _this.homeData = res.data.banners;

            _this.advertisement0 = _this.homeData.advertisement[0].url
            _this.advertisement1 = _this.homeData.advertisement[1].url
            _this.advertisement2 = _this.homeData.advertisement[2].url
            _this.nav_button1 = _this.homeData.nav_button[1].url
            _this.nav_button3 = _this.homeData.nav_button[3].url

            setTimeout(function(){
              var swiper = new Swiper('.swiper-container', {
                slidesPerView: "auto",
                paginationClickable: !0,
                spaceBetween: 12,
                freeMode: !0,
                observer: !0,
                observeParents: !0
              });
            },100)

//            setTimeout(function(){
//              Indicator.close();
//            },1000)

          }
          else{
            //Toast(res.msg)
          }
        }
      })

      this.getLoginInfo();

      //http://api.piver.cn/index.php?route=account/getopenid/index
//      $.ajax({
//        type:'post',
//        url: 'http://api.piver.cn/index.php?route=account/getopenid/index',
//        success:function(res){
//          alert(JSON.stringify(res));
//          if(res.code == 200){
//            alert(JSON.stringify(res));
//          }
//          else{
//            //Toast(res.msg)
//          }
//        }
//      })

    },
    components: {
      footGuide,
      nvshentuijian
    },
    methods: {
      gotoAddress(path){
        this.$router.push(path)
      },
      getLoginInfo(){

//        localStorage.openid = this.$route.query.openid;

//        alert(1)
        var codeStr = window.location.href.split('?')[1];
        if (codeStr) {
          var codeArr = codeStr.split('=');
          var code = '';
          console.log(codeArr[1]);

          if (codeArr[0] == 'code') {
            if (codeArr[1]) {
              code = codeArr[1].split("&state")[0]
            }
            console.log(code);
            //后续把数据存储到 localstorage 里面，处理刷新页面不发下面请求。tip: 根据code 是否和 localstorage 里面的一样
            if (code != sessionStorage.code) {
//              alert(1)
              sessionStorage.code = code;

              var ajaxData = {};
              ajaxData.code = code;
              //然后发送ajax请求用code 换openid和用户信息，将微信的唯一标示openid存储到localstore里面。
              // 如果是已经绑定的用户则存储用户的信息到localstore
              $.ajax({
                type:'post',
                  url: RouteMap.wxopenid,
                  data: ajaxData,
                  success:function(res){
//                  alert(JSON.stringify(res));
                  if(res.code == 200){
//                    alert(JSON.stringify(res));
                    localStorage.openid = res.data.openid;
                  }
                  else{
                    //Toast(res.msg)
                  }
                }
              })

            }
          }
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .Home{
    padding-bottom: 3rem;
    background: #f5f5f5;
  }
  .header-bar{
    position: relative;
    background: #fff;
    padding-bottom: 20px;
  }
  .header-bar .search-box{
    position: absolute;
    z-index: 1111111;
    top: 0;
    padding: 0.3rem 0.5rem;
  }
  .header-bar .search-box img{
    width: 100%;
  }
.top-banner{
  height: 11.3rem;

}
.brand-banner{
  height: 8rem;

}
  .mint-swipe {
    color: #fff;
    font-size: 30px;
    text-align: center;

    background: #fff;
  }

  .slide {
    background-color: #fff;
    color: #fff;
  }
  .slide img{
    width: 100%;
  }
  .nav-box{
    font-size: 0;
    background: #fff;
  }
  .nav-box .tab-item{
    display: inline-block;
    width: 4rem;
    font-size: 0.6rem;
    text-align: center;
  }
  .nav-box .tab-item .img img{
    width: 2.1rem;
  }
  .nav-box .tab-item .font{
    padding-top: .3rem;
  }
  .nav-box .tab-item a{
    color:#707070
  }
  .img-box{
    padding-top: .8rem;
    padding-bottom: .8rem;
    background: #fff;
  }
  .img-box .fl{
    width: 6.88rem;
    margin-left: .6rem;
  }
  .img-box img{
    width: 100%;
  }
  .img-box .fr{
    width: 7.5rem;
    margin-right: .6rem;
  }
  .img-box .img1{
    margin-top: .4rem;
  }

  .brand-area{
    margin-top: .5rem;
  }

  .goddess-rec{
    background: #fff;
    margin-top: .5rem;
    padding-left: .23rem;
    padding-bottom: .5rem;
    color: #707070;
  }
  .goddess-rec .tt{
    text-align: center;
    padding: .5rem 0 .2rem;
  }
  .goddess-rec .tt span{
    display: inline-block;
    background: #ff7b80;
    color: #fff;
    padding: .1rem .3rem;
  }
  .goddess-rec .rec-li{
    float: left;
    width: 7rem;
    margin-left: .5rem;
    margin-top: .5rem;

  }
  .goddess-rec .rec-li .img img{
    width: 100%;
  }
  .goddess-rec a{
    color: #707070;
  }
  .goddess-rec .rec-t{
    padding-top: .2rem;
  }
  .goddess-rec .guanzhu{

  }
  .goddess-rec .shoucang img{
    width: .7rem;
  }
  .goddess-rec .fr{
    padding-right: .2rem;
  }

  .swiper-container {
    width: 100%;
  }
  .swiper-wrapper{

  }
  .swiper-slide {
    text-align: center;
    background: #fff;
    width: 4.3rem;
    font-size: .5rem;
    padding: .65rem 0;
  }
  .swiper-slide:first-child{
    margin-left: 0.7rem;
  }
  .swiper-slide:last-child{
    margin-right: 0.7rem;
  }
  .swiper-slide .font,.swiper-slide .price{
    text-align: left;
    padding:0 .2rem;
    line-height: .8rem;
  }
  .swiper-slide .font{
    padding-top: .2rem;
  }
  .swiper-slide .img img{
    width: 100%;
  }
  .swiper-slide a{
    color: #6c6c6c;
  }
  .scroll-area{
    background: #fff;
  }
</style>
